import {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  Alert,
} from "react-native";
import useUser from "@/hooks/useUser";

import { useSelector } from "react-redux";

import { Logout } from "@/store/user/actions";
import PageContainer from "@/components/PageContainer";
import React, { useState } from "react";
import { LinearGradient } from "expo-linear-gradient";
import { useRouter } from "expo-router"; // 引入 useRouter
import { useDispatch } from "react-redux";
import { useTranslation } from "react-i18next";

export default function Profile() {
  const { t } = useTranslation();
  const storedLanguage = useSelector((state: any) => state.language);
  const router = useRouter(); // 获取路由对象
  const dispatch = useDispatch();
  const { user } = useUser();
  const logout = () => {
    Alert.alert(
      t("profile.prompt"),
      t("profile.confirm_logout"),
      [
        {
          text: t("profile.cancel"),
          style: "cancel",
        },
        {
          text: t("profile.confirm"),
          onPress: () => {
            dispatch(Logout());
            router.replace("/login");
          },
        },
      ],
      { cancelable: false }
    );
  };
  return (
    <PageContainer>
      <View className="bg-[#000] flex-1 p-[13px]">
        <View className="flex-row justify-between pt-[50px]">
          <View className="flex-1 flex-row gap-[10px] items-center">
            <Image
              source={require("@/assets/images/my(1).png")}
              className="w-[55px] h-[55px] rounded-full"
            />
            <View>
              <Text className="text-[#fff] text-[18px]">
                {user.info?.nickName}
              </Text>
              <Text className="text-[#949494] text-[14px] mt-[10px]">
                {t("login.input.account")}：{user.info?.account || "-"}
              </Text>
            </View>
          </View>
          {/* <View>
            <Image
              source={require("@/assets/images/my(7).png")}
              className="w-[90px] h-[22px]"
            />
          </View> */}
        </View>
        <View className="mt-[22px]">
          <TouchableOpacity onPress={() => router.push("/authentication")}>
            <View
              className="py-[20px] flex-row justify-between items-center"
              style={{
                borderBottomWidth: 1,
                borderBottomColor: "#303030",
              }}
            >
              <View className="flex-row gap-[10px] items-center">
                <Image
                  source={require("@/assets/images/my(5).png")}
                  className="w-[22px] h-[22px]"
                />
                <Text className="text-[#fff] text-[16px]">
                  {t("profile.identity_authentication")}
                </Text>
              </View>
              <Image
                source={require("@/assets/images/arrow-right.png")}
                className="w-[18px] h-[18px]"
              ></Image>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => router.push("/set/secure")}>
            <View
              className="py-[20px] flex-row justify-between items-center"
              style={{
                borderBottomWidth: 1,
                borderBottomColor: "#303030",
              }}
            >
              <View className="flex-row gap-[10px] items-center">
                <Image
                  source={require("@/assets/images/my(4).png")}
                  className="w-[22px] h-[22px]"
                />
                <Text className="text-[#fff] text-[16px]">
                  {t("profile.security_settings")}
                </Text>
              </View>
              <Image
                source={require("@/assets/images/arrow-right.png")}
                className="w-[18px] h-[18px]"
              ></Image>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => router.push("/set/invite")}>
            <View
              className="py-[20px] flex-row justify-between items-center"
              style={{
                borderBottomWidth: 1,
                borderBottomColor: "#303030",
              }}
            >
              <View className="flex-row gap-[10px] items-center">
                <Image
                  source={require("@/assets/images/my(3).png")}
                  className="w-[22px] h-[22px]"
                />
                <Text className="text-[#fff] text-[16px]">
                  {t("profile.invite_friends")}
                </Text>
              </View>
              <Image
                source={require("@/assets/images/arrow-right.png")}
                className="w-[18px] h-[18px]"
              ></Image>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => router.push("/set/language")}>
            <View
              className="py-[20px] flex-row justify-between items-center"
              style={{
                borderBottomWidth: 1,
                borderBottomColor: "#303030",
              }}
            >
              <View className="flex-row gap-[10px] items-center">
                <Image
                  source={require("@/assets/images/my(2).png")}
                  className="w-[22px] h-[22px]"
                />
                <Text className="text-[#fff] text-[16px]">
                  {t("profile.language_switch")}
                </Text>
              </View>
              <View className="flex-row gap-[5px] items-center">
                <Text className="text-[#fff] text-[14px]">
                  {storedLanguage.currentLanguage === "zh"
                    ? t("header.languageSelector.chinese")
                    : storedLanguage.currentLanguage === "zh-TW"
                    ? t("header.languageSelector.traditional")
                    : t("header.languageSelector.english")}
                </Text>
                <Image
                  source={require("@/assets/images/arrow-right.png")}
                  className="w-[18px] h-[18px]"
                ></Image>
              </View>
            </View>
          </TouchableOpacity>
        </View>
        <TouchableOpacity onPress={logout}>
          <LinearGradient
            style={styles.loginBtn}
            colors={["#3D7FFF", "#6FC2FA"]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 0 }}
          >
            <Text className="text-[#fff] text-[16px]">
              {t("profile.logout")}
            </Text>
          </LinearGradient>
        </TouchableOpacity>
      </View>
    </PageContainer>
  );
}
const styles = StyleSheet.create({
  loginBtn: {
    height: 50,
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22,
  },
});
